<template>
	<view>
		<view class="tiem">
			<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
				<view class="uni-input">{{date}}</view>
			</picker>
		</view>
		<view  v-if="timels.length>0">
			<div class="lebiao" v-for="(item,index) in timels" :key="index">
				<div>
					<view>
						<image :src="item.avatar" mode=""></image> 
					</view>
					<view>
						<span v-if="item.type==0">
							{{item.nickname}}
							<span class="redpa">查看</span>
							你的
							<span class='redpa'>名片</span>
							第<span class="redpa">{{item.num}}</span>
							次
						</span>
						<span v-else-if="item.type==1">
							{{item.nickname}}
							<span class="redpa">查看</span>
							你的
							<span class='redpa'>产品</span>
							第<span class="redpa">{{item.num}}</span>
							次
						</span>
						<span v-else-if="item.type==2">
							{{item.nickname}}
							<span class="redpa">查看</span>
							你的
							<span class='redpa'>官网</span>
							第<span class="redpa">{{item.num}}</span>
							次
						</span>
						<span v-else-if="item.type==3">
							{{item.nickname}}
							<span class="redpa">复制</span>
							你的
							<span class='redpa'>微信</span>
							第<span class="redpa">{{item.num}}</span>
							次
						</span>
						<span v-else-if="item.type==4">
							{{item.nickname}}
							<span class="redpa">转发</span>
							你的
							<span class='redpa'>名片</span>
							第<span class="redpa">{{item.num}}</span>
							次
						</span>
						<p>成交在望</p>
					</view>
				</div>
				<span>{{item.time}}</span>
			</div>
		</view>
		<view v-else class="noMsg">
			暂无信息
		</view>
	</view>
</template>

<script>
	import {
		card_survey,
	} from '@/api/userminp.js'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				timels:[],
				type:null,
				// 当前时间
				date: currentDate,
			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad(option) {
			if(option.type){
				uni.setNavigationBarTitle({
					title:option.type == 1 ? "用户查看商品列表" : (option.type == 2 ? "用户查看官网列表" : ( option.type == 3 ? "用户复制微信列表" : "用户转发名片列表" ) )
					
				})
				this.type=option.type
				this.card_survey()
			}
		},
		watch:{
			// 选择时间发生变化
			date:function(){
				this.card_survey()
			}
		},
		methods:{
			// 处理时间过滤
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			// 选择时间
			bindDateChange: function(e) {
				this.date = e.detail.value
				console.log(this.date,"date之后")
			},
			// 获取信息列表
			card_survey(){
				card_survey({
					type:this.type,
					time:this.date
				}).then(res=>{
					this.timels = res.data.list
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tiem{
		// margin: 16rpx 48rpx;
		padding: 32rpx 24rpx;
	}
	.lebiao {
		margin: 16rpx 48rpx;
		padding: 32rpx 24rpx;
		background-color: #fff;
		border-radius: 8rpx;
		display: flex;
		justify-content: space-between;
	
		div {
			display: flex;
	
			view:nth-child(1) {
				width: 80rpx;
				height: 80rpx;
	
				image {
					width: 100%;
					height: 100%;
				}
			}
	
			view:nth-child(2) {
				margin-left: 28rpx;
	
				.redpa {
					color: rgba(227, 60, 33, 1);
					font-size: 24rpx;
					font-face: PingFang SC;
					font-weight: 400;
					letter-spacing: 0;
				}
	
				span {
					color: rgba(0, 0, 0, 1);
					font-size: 24rpx;
					font-face: PingFang SC;
					font-weight: 400;
					letter-spacing: 0;
				}
	
				p {
					font-family: "PingFang SC";
					font-weight: 400;
					font-size: 24rpx;
					line-height: 44rpx;
					text-align: left;
					color: #000;
				}
			}
		}
	
		span {
			font-weight: 400;
			font-size: 22rpx;
			line-height: 44rpx;
			text-align: right;
			color: #a0a0a0;
		}
	}
	.noMsg{
		text-align: center;
		margin-top: 100rpx;
	}
</style>
